
<script  lang="tsx">
import {defineComponent, ref, watch} from "vue";
import {ElPagination} from "element-plus"
import {PageProps, pageProps} from "/@/components/Base/BasePage/ts";
export default defineComponent({
  name: "BasePage",
  props: pageProps,
  setup(props: PageProps, {expose, emit, slots}){
    const current = ref(1)
    const size = ref(10)
    watch(
        () => current.value,
        (newValue) => {
          emit("update:current",newValue)
          emit("load")
        },
        { immediate: true }
    );
    watch(
        () => size.value,
        (newValue) => {
          emit("update:size",newValue)
          emit("load")
        }
    );
    watch(
        () => props.current,
        (newValue) => {
          if(newValue){
            current.value = newValue
          }
        },
        { immediate: true }
    );
    watch(
        () => props.size,
        (newValue) => {
          if(newValue){
            size.value = newValue
          }
        }
    );

    const render = () => {
      return <div class="w-full flex mt-3 justify-end" >
        <ElPagination
            background={true}
            {...props.otherAttr}
            v-model:currentPage={current.value}
            v-model:page-size={size.value}
            total={props.total}
            layout={props.layout}
            pageSizes={props.pageSizes}

        ></ElPagination>
      </div>
    }
    return render
  }
})
</script>

<style scoped>

</style>